<template>
  <div class="box">
    <div class="select-box">
      <div v-for="item in dateList.typeList" :key="item.text">
        <div :class="{ active: item.active }" @click="change(item)">
          <span>{{ item.text }}</span>
        </div>
      </div>
    </div>
    <br />
    <!-- <el-divider></el-divider> -->
    <div class="select-data" v-if="dateList.activeObj.text == '自定义'">
      <el-date-picker v-model="selectDate" size="mini" type="daterange" :picker-options="pickerOptions"
        @change="dateChange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { time } from 'echarts';
export default {
  data() {
    return {
      selectDate: [],
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  created() {
    // console.log('center------1', this.dateList)
  },
  inject: ['dateList'],
  methods: {
    change(targe) {
      if (targe.active) return
      this.dateList.active(targe)
      if (this.dateList.activeObj.text == '自定义') this.selectDate = []
    },
    dateChange(param) {
      console.log('EEEEEE', param)
      this.dateList.custom.setDate(param)
    }
  }

}
</script>

<style scoped>
.box {
  font-size: 20px;
}

.select-box {
  display: flex;
  justify-content: flex-start;
  color: #0095ff;
  /* border: 1px solid red; */
  position: relative;
  top: 10px;
  left: 10px;
}

.select-box>div {
  /* width: 50%; */
  padding: 5px;
  border: 1px solid #042e57;
  border-radius: 0px 10px 0px 10px;
  /* margin: 0px 5px; */
  cursor: pointer;
}
.select-box span {
  padding: 10px;
}

.active {
  color: #fff;
  background: linear-gradient(90deg, #1a83d3, #225a96);
  border-radius: 0px 10px 0px 10px;
}

.select-data {
  display: block;
  border: 1px solid red;
  /* position: relative;
  top: 200px;
  left: 10px; */
}
</style>